<template>
  <section class="page">
    <headerbar :hideBack="true">党务
      <div class="head-btn" slot="btn"><img src="../../../../static/images/dangjian/home/icon-scan-white.png" alt=""
                                  @click="capture()"></div>
    </headerbar>
    <section class="frame-content bg-default">
      <section class="inner pdv-0 pdh-0">
        <section class="">
          <div class="icon-btns">
            <div class="item" @click="go('noticeNotice')">
              <i class="msg-num" v-if="count">{{count}}</i>
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/tzgg.png" alt=""></i>
              <span class="text">通知公告</span>
            </div>
            <div class="item" @click="showMore">
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/zzsh.png" alt=""></i>
              <span class="text">组织生活</span>
            </div>
            <div class="item" @click="goPolicyDocument()">
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/zcwj.png" alt=""></i>
              <span class="text">党务知识</span>
            </div>
            <div class="item" @click="showAlart()">
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/ezb.png" alt=""></i>
              <span class="text">e支部</span>
            </div>
          </div>
        </section>

        <section class="today-statistics" v-if="activationInfo.todayLogin">
          <div class="number">
            <span class="normal">今日登录</span>
            <span v-for="item in  (activationInfo.todayLogin+'').padStart(7, '0')" class="no">{{item}}</span>
            <span class="normal">人</span>
          </div>
          <div class="number">
            <span class="normal">今日活跃</span>
            <span v-for="item in  (activationInfo.todayActivationGroup+'').padStart(4, '0')" class="no">{{item}}</span>
            <span class="normal">个党支部</span>
          </div>
        </section>

        <section class="">
          <div class="echart-title" v-html="data.title"></div>

          <div class="cant-touch-wrap">
          <div class="echart">
            <div class="item" @click="openRanking('zbdydh',1)">
              <div class="chart"><homePie :textColor="'#F96037'" :charData="completesArray(zbdydh)" :id="'c1'" id="c1"></homePie>
                <span class="text">完成率</span>
              </div>
              <p class="tip"> {{this.zbdydh.typeName}}</p>
            </div>
            <div class="item" @click="openRanking('zbwyh',2)">
              <div class="chart"><homePie :textColor="'#FFCE54'" :charData="completesArray(zbwyh)" :id="'c2'" id="c2"></homePie>
                <span class="text">完成率</span>
              </div>
              <p class="tip">{{this.zbwyh.typeName}}</p>
            </div>
            <div class="item" @click="openRanking('dxzh',4)">
              <div class="chart"><homePie :textColor="'#A3D172'" :charData="completesArray(dxzh)" :id="'c3'" id="c3"></homePie>
                <span class="text">完成率</span>
              </div>
              <p class="tip">{{this.dxzh.typeName}}</p>
            </div>
            <div class="item" @click="openRanking('dktj',5)">
              <div class="chart"><homePie :textColor="'#49CFAE'" :charData="completesArray(dktj)" :id="'c4'" id="c4"></homePie>
                <span class="text">完成率</span>
              </div>
              <p class="tip">{{this.dktj.typeName}}</p>
            </div>
          </div>
          <div class="cant-touch"></div>
          </div>
        </section>


        <section class="block mgt-2 pdv-2 pdh-2">
          <div class="block-title pdh-2">支部空间</div>

          <div class="block-img" @click="goBranchSpace()">
            <!--<img v-if="memorabiliaData.cover" :src="tools.getImgUrl(memorabiliaData.cover)" alt="">
            <img v-if="!memorabiliaData.cover" src="../../../../static/images/dangjian/dangwu/branch_bg.png" alt="">-->

            <bannerImg v-if="memorabiliaData.cover" :url="tools.getImgUrl(memorabiliaData.cover,true)"></bannerImg>


            <div class="inner-text">
              <div class="group-name">{{memorabiliaData.alias}}</div>
              <div class="banner-avatar-info" v-if="false">
                <div class="avatar-wrap" v-if="false">
                  <div class="avatar">
                    <img v-if="memorabiliaData.avatar" :src="tools.getImgUrl(memorabiliaData.avatar,true)" alt="">
                    <img v-if="!memorabiliaData.avatar" src="../../../../static/images/dangjian/dangwu/branch_avatar.png" alt="">
                  </div>
                </div>
                <div class="info" v-if="memorabiliaData">
                  <h1>{{memorabiliaData.alias}}</h1>
                  <p class="text">{{memorabiliaData.signature}}</p>
                </div>
              </div>
            </div>
          </div>
          <fetchData :loading="isLoading" :data="memorabiliaData.nodeList"></fetchData>
          <section class="news-list" v-if="memorabiliaData.nodeList">
            <div class="news-item" v-for="item in memorabiliaData.nodeList" @click="goDetail(item)">{{item.title}}</div>
          </section>

        </section>

        <div class="pdv-2"></div>

      </section>
    </section>
<!--党务小助手-->
    <robot v-if="false"></robot>

    <dialogMore :title="'组织生活'" ref="dialog">
      <section>
        <section class="">
          <div class="icon-btns pdv-0 dialog">
            <div class="item" @click="goOrganizationalLife('shyk')">
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/shyk.png" alt=""></i>
              <span class="text">三会一课</span>
            </div>
            <div class="item" @click="goOrganizationalLife('ztdr')">
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/ztdr.png" alt=""></i>
              <span class="text">主题党日</span>
            </div>
            <div class="item" @click="goOrganizationalLife('mzpy')">
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/mzpy.png" alt=""></i>
              <span class="text">民主评议</span>
            </div>
            <div class="item" @click="goNewTermReminder()">
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/hjtx.png" alt=""></i>
              <span class="text">换届提醒</span>
            </div>
          </div>
        </section>
      </section>
    </dialogMore>
    <footerbar></footerbar>
  </section>
</template>

<script>
  import footerbar from '../../../components/layout/footerbar.vue'
  import dialogMore from '../../../components/layout/dialogMore.vue'
  import homePie from '../../../components/common/homePie.vue'
  import robot from '@/components/common/robot.vue'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import tools from '@/utils/tools'
  import StorageKeys from '@/common/const/StorageKeys'
  export default {
    components: {footerbar, dialogMore, homePie, robot},
    name: 'layoutContent',
    data () {
      return {
        isLoading: true,
        data: [],
        zbdydh: 0,
        zbwyh: 0,
        dxzh: 0,
        dktj: 0,
        memorabiliaData: {},
        dateTime: [],
        count: 0,
        swipeData: [],
        activationInfo: {},
        userInfo: {},
        isOpen:'false',
        zzshpmQxFlag:'0',
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
      // 默认显示缓存数据
      this.data = this.$localStorage.get(StorageKeys.PARTI_AFFARIRS_DATA) || this.data
      this.zbdydh = this.$localStorage.get(StorageKeys.PARTI_AFFARIRS_ZBDYDH) || this.zbdydh
      this.zbwyh = this.$localStorage.get(StorageKeys.PARTI_AFFARIRS_ZBWYH) || this.zbwyh
      this.dxzh = this.$localStorage.get(StorageKeys.PARTI_AFFARIRS_DXZH) || this.dxzh
      this.dktj = this.$localStorage.get(StorageKeys.PARTI_AFFARIRS_DKTJ) || this.dktj
      this.dateTime = this.$localStorage.get(StorageKeys.PARTI_AFFARIRS_DATETIME) || this.dateTime
      this.memorabiliaData = this.$localStorage.get(StorageKeys.MEMORABILIA_DATA) || this.memorabiliaData
      this.activationInfo = this.$localStorage.get(StorageKeys.HOME_ACTIVATION_INFO) || this.activationInfo
      this.zzshpmQx()
      this.loadData()
      this.getDictValue()
      this.countUnRead()
      this.memorabilia()
      this.getPtype();
      // this.receiveData()
      this.homeActivationInfo()
    },
    mounted () {
      if (this.tools.getDialogNum() > 0) {
        this.tools.dialog(-1)
        this.showMore()
      }
      window['returnScanResult'] = (v) => {
        this.returnScanResult(v)
      }
    },
    methods: {
      getPtype(){
        console.log('this.userInfo',this.userInfo.mainGroupId);
        this.fetchService.partyQueryList(this.userInfo.mainGroupId).then(res=>{

        })
      },
      showMore () {
        this.$refs.dialog.show()
      },
      openRanking(type,typeId){//打开支部详情
        console.log(this.isOpen);
        //暂时屏蔽
        // return false;
        /*if(this.isOpen !== 'true'){
          return false;
        }*/
        let userId = this.$localStorage.get('userInfo').id
        // if(true){ //测试放开
        if(this.zzshpmQxFlag === '1' || userId==='10000000000001'){ //有查看权限 userId==='10000000000001' 开后门
          let title = '支部大会'
          if(type ==='zbdydh'){
            title = this.zbdydh.typeName
          }else if(type ==='zbwyh'){
            title = this.zbwyh.typeName
          }else if(type ==='dxzh'){
            title = this.dxzh.typeName
          }else if(type ==='dktj'){
            title = this.dktj.typeName
          }
          this.$router.push({name:"partyAffairsRanking",query:{title:title,type:typeId}})
        }
      },
      go (name) {
        if (name === 'noticeNotice') {
          this.$store.commit('addRoute','noticeNotice')
        }
        this.$router.push({name: name})
      },
      goPolicyDocument () {
        let id = '8'
        this.$router.push({path: `/policyDocument/${id}`})
      },
      goBranchSpace () {
        this.$router.push({path: `/branchSpace/${this.memorabiliaData.id}`})
      },
      goOrganizationalLife (type) {
        this.$router.push({path: `/sanhuiyike/${type}`})
      },
      goNewTermReminder () {
        this.$router.push({path: `/newTermReminderDetail`})
      },
      zzshpmQx(){//组织生活排名查看权限
        loginService.zzshpmQx().then(res=> {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.zzshpmQxFlag = res.data
        })
      },
      loadData () {
        let data = {
          loginId: '3750'
        }
        loginService.complete(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.data = res.data
          this.zbdydh = this.data.completeList[0]
          this.zbwyh = this.data.completeList[1]
          this.dxzh = this.data.completeList[2]
          this.dktj = this.data.completeList[3]
          this.dateTime = this.data.endTime.split('-')

          this.$localStorage.set(StorageKeys.PARTI_AFFARIRS_DATA, this.data)
          this.$localStorage.set(StorageKeys.PARTI_AFFARIRS_ZBDYDH, this.zbdydh)
          this.$localStorage.set(StorageKeys.PARTI_AFFARIRS_ZBWYH, this.zbwyh)
          this.$localStorage.set(StorageKeys.PARTI_AFFARIRS_DXZH, this.dxzh)
          this.$localStorage.set(StorageKeys.PARTI_AFFARIRS_DKTJ, this.dktj)
          this.$localStorage.set(StorageKeys.PARTI_AFFARIRS_DATETIME, this.dateTime)
        })
      },
      completes (data) {
        if (!data) {
          return 0.0
        }
        let value = data.completeNum / data.num
        console.log('-------------value=' + value)
        let result = Math.round(value * 100)
        console.log('-------------result=' + result)
        return result
      },
      completesArray (data) {
        if (!data) {
          return 20.0
        }
        return this.completes(data)
        let val = data.completeNum / data.num
        val = parseFloat(val).toFixed(2) * 100
        let otherVal = 100 - val
        console.log(otherVal)
        return [
          {value: val, name: val + '%'},
          {value: otherVal, name: ''}
        ]
      },
      homeActivationInfo () {
        this.fetchService.homeActivationInfo().then(res => {
          if (res.code === 0) {
            this.activationInfo = res.data
            this.$localStorage.set(StorageKeys.HOME_ACTIVATION_INFO, this.activationInfo)
          }
        })
      },
      memorabilia () {
        this.isLoading = true
        let userId = this.$localStorage.get('userInfo').id
        let data = {
          loginId: userId,
          nodeType: '1',
          pageSize: '200'
        }
        this.fetchService.getOrgInfoByUser(data).then(res => {
          this.isLoading = false
          if (res.code !== 0) {
            return false
          }
          this.memorabiliaData = res.data
          this.$localStorage.set(StorageKeys.MEMORABILIA_DATA, this.memorabiliaData)
          this.$store.state.maintainable = res.data.maintainable || '4'
        })
      },
      /**
       * 判断是是否跳转到搜索e支部页面
       * */
      showAlart () {
        // tools.tip('未开放')
        // return
        if(true){
          this.$router.push({path: `/eBranch`});
        }else{
          this.goBranchSpace();
        }
        // tools.tip('未开放')
      },
      receiveData () {
        let data = {
          loginId: '20160503155632000078',
          pageNo: '1',
          pageSize: '10',
          orgId: this.userInfo.mainGroupId
        }
        this.fetchService.branchNodeList(data).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.swipeData = res.data || []
        })
      },
      goDetail (data) {
        this.$router.push({path: `/branchNoticeNoticeDetail/${data.id}`})
      },
      // 打开扫码界面
      capture () {
        window.android.capture()
        // this.returnScanResult('{"code":"orgLifeSignCode","orgLifeId":"1CD5219E7FD74DA8911D7FB87D18D998","timestamp":"1591751516853"}')
        // this.returnScanResult('http://www.djhy.gov.cn/appDown/?info={"qrCodeKey":"85a60c3d-e609-448a-bfc0-76c08495aa4d","status":"login"}')
      },
      // 扫码成功返回
      returnScanResult (result) {
        // alert(result)
        // alert(this.tools.getToken())
        let resultData =''
        if(this.tools.indexOfHttp(result)){
          resultData = JSON.parse(result.substring(result.indexOf('{'),result.indexOf('}')+1))
        }else {
          resultData = JSON.parse(result)
        }
        // alert(result)
        // alert(this.tools.getToken())
        if(resultData.status=== 'login'){
          let params = {
            qrCodeKey: resultData.qrCodeKey,
            token: this.tools.getToken()
          }
          let _this = this
          this.$createDialog({
            type: 'confirm',
            title: "登录提示",
            content: '扫码成功，确认登录网站？',
            confirmBtn: {
              text: '确定',
              active: true,
              disabled: false,
              href: 'javascript:;'
            },
            cancelBtn: {
              text: '取消',
              active: false,
              disabled: false,
              href: 'javascript:;'
            },
            onConfirm: () => {
              loginService.submitQrCodeKey(params).then((res) => {
                if(res.code === 0){
                  return tools.tip(res.message)
                }
              })
            },
            onCancel: () => {
            }
          }).show()
          return
        }
        // let resultData = JSON.parse(result)
        // let resultData = JSON.parse(Base64.decode(result))
        console.log('----------result=' + result)
        // window.android.testQcode123(resultData.orgLifeId + ',' + resultData.timestamp)
        let data = {
          orgLifeId: resultData.orgLifeId,
          timestamp: resultData.timestamp
        }
        loginService.meet_sign(data).then((res) => {
          return tools.tip(res.message)
        })
      },
      /*未读通知数量*/
      countUnRead () {
        let data = {
          loginId: this.userInfo.id
        }
        this.fetchService.countUnRead(data).then(res => {
          if (res.code === 0) {
            this.count = res.data
          }
        })
      },
      //请求字典值
      async getDictValue () {
        let data={
          catKey:'DANG_WU_',
          treeKey:'DWMKKG'
        }
        await this.fetchService.dictValue(data).then(res => {
          if(res.code === 0){
            console.log('res.datares.datares.data=',res.data);
            res.data.forEach(item=>{
              if(item.key==='shykwcl'){
                this.isOpen = item.value
              }
            })
            // this.selectList=res.data
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .header .head-btn {
    border:none;
    font-size:0;
    line-height: normal;
    img {
      height:40px;
    }
  }
  .block {
    background:rgba(255,255,255,0.9);
    box-shadow:0px pxToRem(5px) pxToRem(20px) 0px rgba(0,0,59,0.1);
    opacity:0.9;
    border-radius:pxToRem(20px);
    .block-title {
      color:#333;
      font-size:$titleFontSize;
      font-weight:bolder;
    }
    .block-img {
      margin-top:pxToRem(20px);
      height:pxToRem(240px);
      width:100%;
      border-radius:pxToRem(10px);
      overflow: hidden;
      position: relative;
      text-align: center;
      background:url('../../../../static/images/dangjian/dangwu/partyAffairs_bg_defalut.png') no-repeat center;
      background-size: 100% auto;
      img {
        border-radius:pxToRem(10px);
        height:100%;
        width:auto;
      }

      .inner-text {
        position: absolute;
        left:0;
        top:0;
        @include fullImg();
        .group-name {
          color:#fff;
          position: absolute;
          bottom:10px;
          left:10px;
          display:inline-block;
          padding:10px 30px;
          border-radius:20px;
          background-color: rgba($theme-color, .7);
          font-size: $titleFontSize;
        }
        .banner-avatar-info {
          display:flex;
          padding-top:pxToRem(56px);
          padding-left: pxToRem(25px);
          .avatar-wrap {
            width:pxToRem(118px);
            height:pxToRem(118px);
            flex-shrink:0;
            border:pxToRem(6px) solid rgba(255, 180, 180, 0.8);
            border-radius:100%;
            .avatar {
              border-radius:100%;
              @include fullImg();
              img {
                border-radius:100%;
                @include fullImg();
              }
            }
          }
          .info {
            margin-left:pxToRem(27px);
            h1 {
              font-size:pxToRem(36px);
              font-weight:bold;
              color:rgba(255,255,255,1);
              line-height:pxToRem(70px);
              opacity:0.9;
            }
            .text {
              font-size:pxToRem(19px);
              font-weight:400;
              color:rgba(255,255,255,1);
              line-height:pxToRem(32px);
            }
          }
        }
      }
    }
  }
  .icon-btns {
    padding:pxToRem(37px) 0;
    .item {
      position: relative;
      .img {
        width:113px;
        height:113px;
        margin-bottom: pxToRem(0px) !important;
      }
      .text {
        margin-top: pxToRem(-10px) !important;
        font-size:$defaultFontSize;
      }
      /*消息数量*/
      .msg-num {
        background:$theme-color;
        border-radius:100px;
        color:#fff;
        text-align: center;
        display:block;
        position: absolute;
        padding:0 5px;
        white-space:nowrap;
        left:50%;
        top:50%;
        transform:translate3d(40px, -80px,0);
        min-width:pxToRem(40px);
        height:pxToRem(40px);
        font-size: $defaultFontSize;
        font-style: normal;
      }
    }
    &.dialog {
      .item {
        .img {
          margin-bottom: pxToRem(10px);
        }
      }
    }
  }
  .today-statistics {
    /*width:750px;*/
    width:100%;
    background:rgba(210,208,208,1);
    opacity:0.91;
    padding:24px 41px;
  }
  .number {
    font-size:pxToRem(28px);
    font-weight:400;
    color:rgba(51,51,51,1);
    &:first-child {
      margin-bottom:10px;
    }
    .no {
      font-size:20PX;
      font-weight:bold;
      color:#fff;
      display:inline-block;
      background:$theme-color;
      border-radius:10px;
      padding:0 15px;
      margin:0;
      margin-right:1px;
    }
  }
  .echart-title {
    padding:0 40px;
    padding-top:20px;
    white-space: normal;
    font-size:15PX;
    .date {
      color:#043B8B;
      font-size:18PX;
    }
    .color-red {
      font-size:22PX;
    }
  }
  .echart {
    display:flex;
    justify-content: space-around;
    margin-top:pxToRem(10px);
    position: relative;
    .item {
      text-align: center;
      .title {
        color:#000;
        font-size:pxToRem(24px);
      }
      .tip {
        color:#252525;
        margin-bottom:29px;
        font-size: 13PX;
      }
      .chart {
        width:pxToRem(140px);
        height:pxToRem(140px);
        margin:0 0 pxToRem(20px);
        position: relative;
        .text {
          position:absolute;
          z-index: 1;
          font-size:10PX;
          /*font-weight:bolder;*/
          color:#000;
          display:block;
          width:100%;
          text-align: center;
          top:55%;
        }
        canvas {
          margin-top: -30px;
          @include fullImg();
        }
      }
    }
  }
  .cant-touch-wrap {
    position:relative;
    .cant-touch {
      position:absolute;
      z-index:1;
      left:0;right:0;top:0;bottom:0;
    }
  }
</style>
